<template>
  <div>
    <el-menu
      :default-active="groupId.toString()"
      :default-openeds="$route.params.parentId"
    >
      <el-menu-item-group>
        <el-menu-item style="padding-left: 0px" index="-1" @click="loadArticles(-1)">
          <span style="padding-left: 10px;"><i class="el-icon-menu" style="font-size:16px"> 全部文档</i></span>
        </el-menu-item>
        <div
          v-for="(topic, index) in topics"
          :key="index"
          @contextmenu.prevent="
            rightClick($event, topic.topicId, topic.topicName, 1)
          "
        >
          <el-submenu
            :index="topic.topicId.toString()"
            :disabled="!topic.children.length > 0"
          >
            <template slot="title">
              <span style="padding-left: 10px"> <i class="el-icon-menu" style="font-size:16px"> {{ topic.topicName }}</i> </span>
            </template>
            <div
              v-for="(topc, index) in topic.children"
              v-bind:key="index"
              @contextmenu.prevent.stop="
                rightClick($event, topc.topicId, topc.topicName, 2)
              "
            >
              <el-menu-item
                :index="topc.topicId.toString()"
                @click="loadArticles(topc.topicId, topic.topicId)"
              >
                <span class="ml-10"><i class="el-icon-folder" style="font-size:16px"> {{ topc.topicName }}</i></span>
              </el-menu-item>
            </div>
          </el-submenu>
        </div>
      </el-menu-item-group>
    </el-menu>

    <el-dialog title="新增分组" :visible.sync="addFlag" width="400px" center>
      <el-form>
        <el-form-item label="分组名称" label-width="5em">
          <el-input v-model="topicName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click=";(addFlag = false), saveTopic()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addTopic, qryTopics, delTopic, updTopic } from '@/api/topicApis'
import { qryArticles } from '@/api/apis'
import { mapGetters } from 'vuex'
export default {
  name: 'group-list',
  data() {
    return {
      topics: [],
      ptopics: [],
      addTpcName: '',
      addFlag: false,
      editFlag: false,
      topicName: '',
      groupType: 'add',
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'groupId',
      // ...
    ]),
  },
  mounted() {
    let topicId = -1
    this.$store.commit('blog/setGroupId', topicId)
    this.loadTopics()
    this.reloadArticles(topicId, 1)
  },

  methods: {
    reloadArticles(topicId, page) {
      let map = { topicId: topicId, page: page, pageSize: 10 }
      if (topicId == -1 || topicId == 0) {
        map = { page: page, pageSize: 10 }
      }
      this.topicId = topicId
      qryArticles(map)
        .then(({ data }) => {
          this.articles = data.values
          this.total = data.total
          this.$store.commit('blog/setArticles', {
            articleList: data.values,
            articleTotal: data.total,
          })
          this.$store.commit('blog/setModel', 'list')
          this.$store.commit('blog/setGroupId', topicId)
        })
    },
    loadTopics() {
      qryTopics().then((res) => {
        this.topics = res.data
      })
    },
    loadArticles(topicId) {
      this.reloadArticles(topicId, 1)
    },
    saveTopic() {
      if (this.groupType == 'add') {
        addTopic({
          topicName: this.topicName,
          parentId: this.groupId,
        // eslint-disable-next-line no-unused-vars
        }).then((res) => {
          this.loadTopics()
        })
      } else {
        updTopic({
          topicName: this.topicName,
          topicId: this.groupId,
        // eslint-disable-next-line no-unused-vars
        }).then((res) => {
          this.loadTopics()
        })
      }
      this.topicName = null
    },

    removeGroup(topicId, topicName) {
      if (topicId == '') return
      const vue = this
      this.$layer.confirm(
        '确定删除分组' + topicName + '?',
        {
          // icon: 3,
          title: '删除分组',
          btn: ['删除', '取消'], //按钮
        },
        function (index) {
          // eslint-disable-next-line no-unused-vars
          delTopic({ topicId: topicId }).then((res) => {
            vue.loadTopics()
            vue.editFlag = false
            vue.$layer.close(index)
            vue.$layer.alert('删除成功')
          })
        },
        function (index) {
          vue.$layer.close(index)
          vue.editFlag = false
        }
      )
    },

    rightClick(event, groupId, groupName, type) {
      if (type == 1) {
        this.parentEvent(event, groupId, groupName)
      } else {
        this.onContextmenu(event, groupId, groupName)
      }
    },

    parentEvent(event, groupId) { 
      this.$contextmenu({
        items: [
          {
            label: '新建文章',
            icon: 'el-icon-plus',
            onClick: () => {
              this.$store.commit('blog/setGroupId', groupId)
              this.$store.commit('blog/setModel', 'edit')
              this.$store.commit('blog/setArticleId', null)
            },
          },
          {
            label: '新建分组',
            icon: 'el-icon-circle-plus-outline',
            onClick: () => {
              this.$store.commit('blog/setGroupId', groupId)
              this.addFlag = true
              this.groupType = 'add'
            },
          },
        ],
        event,
        customClass: 'class-a',
        zIndex: 9999,
        minWidth: 150,
      })
      return false
    },
    onContextmenu(event, groupId, groupName) {
      this.reloadArticles(groupId, 1)
      this.$contextmenu({
        items: [
          {
            label: '新建文章',
            icon: 'el-icon-plus',
            onClick: () => {
              this.$store.commit('blog/setModel', 'edit')
              this.$store.commit('blog/setArticleId', null)
            },
          },
          {
            label: '删除分组',
            icon: 'el-icon-delete',
            onClick: () => {
              this.removeGroup(groupId, groupName)
            },
          },
          {
            label: '命名分组',
            icon: 'el-icon-edit-outline',
            onClick: () => {
              this.$store.commit('blog/setGroupId', groupId)
              this.addFlag = true
              this.topicName = groupName
              this.groupType = 'edit'
            },
          },
          {
            label: '重新加载',
            divided: true,
            icon: 'el-icon-refresh',
            onClick: () => {
              this.reloadArticles(groupId, 1)
            },
          },
        ],
        event,
        customClass: 'class-a',
        zIndex: 9999,
        minWidth: 150,
      })
      return false
    },
  },
}
</script>

<style scoped>
.is-active{
  background: rgb(210,226,255);
}
</style>
